import { createRouter, createWebHistory } from "vue-router";

import Films from "../views/films.vue";
import Cinemas from "../views/cinemas.vue";
import Posts from "../views/posts.vue";
import Center from "../views/center.vue";
import Login from "../views/login.vue";
import Home from "../views/home.vue";
import NowPlaying from "../views/nowPlaying.vue";
import ComingSoon from "../views/comingSoon.vue";

const router = createRouter({
  history: createWebHistory(),
  /**
   * 根路由（一级路由): routes 配置项下的顶层对象
   * 路由组件：给到 component 配置项使用的组件，我们叫他 路由组件（路由页面组件）
   * 嵌套路由：一个路由配置可以通过 children 配置项配置属于它的子路由。形成嵌套关系
   *
   * 项目关键点：找出正确的根路由（一级路由）
   *           引起整个页面变化的就是一级路由
   */
  routes: [
    {
      path: "/login",
      component: Login,
    },
    {
      path: "/",
      component: Home,
      /**
       * children, 用于配置子路由，
       *
       * PS:
       *  1. 子路由的 path 不需要从 / 开头，它会拼接上父路由的 path 路径
       *  2. 子路由的 component 的内容，渲染到父路由的组件的 RouterView 中
       */
      children: [
        {
          path: "films",
          component: Films,
          children: [
            {
              path: "nowPlaying",
              component: NowPlaying,
            },
            {
              path: "comingSoon",
              component: ComingSoon,
            },
          ],
        },
        {
          path: "cinemas",
          component: Cinemas,
        },
        {
          path: "posts",
          component: Posts,
        },
        {
          path: "center",
          component: Center,
        },
      ],
    },
  ],
});

export default router;
